<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>我的高考梦</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <style>
    	.right ul li{
    		border: 1px solid #ccc;
			list-style-type: none;
			padding: 10px;
			margin-bottom: 8px; 
			border-radius: 5px;
    	}
    	.footer {
    		width: 100%;
    		height: 80px;
    		border-top: 1px solid #ccc;
    		background-color: #f5f5f5;
    	}
    	.info {
    		width: 300px;
    		height: 30px;
    		margin: 30px auto 0;
    	}
    	.text {
    		display: none;
    		width: 500px;
    		position: absolute;
    		z-index: 999;
    		right: 0;
    		background-color: #ccc;
    		padding: 30px;
    	}
    	.guest {
			margin-top: -30px; 
    	}
    </style>  
</head>
<body>
	<!-- 导航栏 -->
	<nav class="navbar navbar-default" role="navigation"> 
	    <div class="container-fluid"> 
	        <div class="navbar-header"> 
	            <a class="navbar-brand" href="#">我的高考梦</a> 
	        </div> 
	        <ul class="nav navbar-nav navbar-right"> 
	            <li>
	            	<a href="#" class="guest">
	            		<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2296494141&site=qq&menu=yes">
	            			联系客服
	            			<img border="0" src="http://wpa.qq.com/pa?p=2:2296494141:52" alt="点击这里给我发消息" title="点击这里给我发消息"/>
	            		</a>
	            	</a>
	            </li> 
	            <li>
	            	<a href="#" class="message">
	            		<span class="glyphicon glyphicon-log-in"></span> 留言
	            	</a>
	            </li> 
	        </ul> 
	    </div> 
	</nav>
	<!-- 留言 -->
	<div class="text">
		<textarea class="form-control content" rows="10"></textarea>
		<button type="button" class="btn btn-success btn-sm save">提交</button>
		<button type="button" class="btn btn-info btn-sm cut">关闭</button>
	</div>
	<!-- 内容 -->
	<div class="container">
		<div class="col-xs-6">
			<h3>我的高考梦</h3>
			<pre>
				有人说，高考是一场噩梦，他让你为之压抑颤抖，无形中给你压力。有人说，高考是在海上与狂风暴雨的殊死搏斗，它考验你的毅力，磨练你的坚忍，令人身心俱惫。而我说，高考是通往梦想的阶梯，他帮助你成为心中那个最美好的自己。

相比于其他比赛，高考是一个综合考察的考试，他考察你的毅力，耐心和抗压力。他不需要你有多聪明，多机智，它要的是你一步一步踏踏实实的稳重与认证，坚持与忍耐。正是高考对我们的这种要求使我们痛苦，却也是我们成长。

再去看学长学姐们参加高考时，我惊奇的看到每个人脸上都闪烁着光芒，那光芒耀眼，令人无法忽视。我看到他们坚定步伐。昂首挺胸地走入考场，像一个个披坚执锐的战士，斗志昂扬，势不可挡。

当我也成为高三的学生时，当高考离我越来越近是，我开始惶恐、不安。我害怕，我害怕有一天自己会失去斗志，萎靡不振；害怕困难会阻挡我前进的步伐，不能再多走一步；害怕自己努力太单薄，不足以让这个梦成真。这时，我的眼前浮现出学长学姐脸上闪烁的光芒。那时对梦想的执着追求，是“苦心人，天不负”的踌躅满志，是对青春的不悔承诺。

我恍然大悟。是的，我们是在追梦吗，可我们在追逐的同时也恰恰早就了一个光芒四射，激情澎湃，坚忍不拔的自己。我们一路披荆斩棘，身上被刮出无数伤口，可当伤口健将愈合，我们自己也愈加坚强强大。与其说我们在追梦，不如说我们在追逐最好的自己。

有位著名的哲学家曾说过：“每个人都在奋斗中成为了一个更好的自己。”是的，我们每天挥洒汗水，勤奋刻苦，不就是为了成为一个更好的自己吗？高考是一场梦，梦里有痛苦，也有喜悦，有迷茫，也有执着，有创伤，也有成长。它不想一个童话故事一样水到渠成，它需要我们用尽全力去创造，去你娘，去打磨一个最好的自己！

向往吧，少年！一个更加坚强美好的自己就在前方！	
			</pre>
		</div>
		<div class="col-xs-6 right">
			<ul>
				<li>1.<a href="#">一个更加坚强美好的自己就在前方</a></li>
				<li>2.<a href="#">它需要我们用尽全力去创造</a></li>
				<li>3.<a href="#">它不想一个童话故事一样水到渠成</a></li>
				<li>4.<a href="#">每个人都在奋斗中成为了一个更好的自己</a></li>
				<li>5.<a href="#">我们自己也愈加坚强强大</a></li>
				<li>6.<a href="#">当高考离我越来越近是</a></li>
				<li>7.<a href="#">它要的是你一步一步踏踏实实的稳重与认证</a></li>
				<li>8.<a href="#">正是高考对我们的这种要求使我们痛苦</a></li>
				<li>9.<a href="#">他帮助你成为心中那个最美好的自己</a></li>
				<li>10.<a href="#">有人说，高考是一场噩梦</a></li>
			</ul>
		</div>
	</div>
	<!-- 尾部 -->
	<div class="footer">
		<div class="info">Copyright © 版权所有 赣ICP备20001370号</div>
	</div>
</body>
</html>
<script>
	$(function () {
		//初始化保存数据
		$.get("handle.php?action=init",function (res) {
			console.log(res);
		});
		//获取列表
		$.get("handle.php?action=list",function (res) {
			showList(res.result.data);
		},'json');
		//添加留言
		$('.message').click(function () {
			$('.text').show();
		})
		//保存
		$('.save').click(function () {
			var value = $('.content').val();
			if (value == '') {
				alert('请勿空白提交');
				return;
			}
			$.ajax({
				url:'handle.php?action=message',
				type:'post',
				data:{
					content:value
				},
				dataType:'json',
				success:function (res) {
					if (res.code == 1) {
						alert('感谢您的留言');
						$('.content').val('');
					} else {
						alert('留言失败，请刷新重试');
					}
				}
			});
		});
		//关闭
		$('.cut').click(function () {
			$(this).parent('.text').hide();
		});
	});

	function showList(list){
		var html = '';
		for (var i = 0; i < 10; i++) {
			html += '<li>' +
				'<span style="color:red;">'+ (i+1) +'. </span>' +
				'<a href='+ list[i].url +'>' + list[i].title + '</a>' +
			'</li>'
		}
		$('.right ul').append(html);
	}
</script>